.blogDetail {
    padding: 50px 20px;
    box-sizing: border-box;
    &-title {
        font-size: 22px;
        font-weight: bold;
        text-align: center;
        margin: 12px 0;
    }
    &-info {
        margin: 8px 0;
        text-align: center;
        font-size: 14px;
        color: var(--color-qian);
    }
    &-content {
        font-size: 14px;
        color: var(--font-color-black);
        li {
            list-style: initial;
            margin-bottom: 8px;
        }
        h1, h2, h3, h4, h5 {
            margin-bottom: 8px;
        }
        p {
            margin-bottom: 8px;
        }
        img {
            width: 100%;
        }
        pre {
            background-color: #2b2b2b;
            overflow: auto;
            padding: 16px;
            font-size: 13px;
            margin-bottom: 8px;
            border-radius: 8px;
            box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
            .hljs {
                color: #acb7c4;
                line-height: 20px;
                &-comment {
                    color: #74985d;
                }
                &-meta {
                    color: #bab546;
                }
                &-keyword {
                    color: #ae723e;
                }
                &-title {
                    color: #f6c87b;
                }
                &-type {
                    color: #9377a7;
                }
                &-tag {
                    color: #679ad1;
                }
                &-selector-class {
                    color: #d2bb85;
                }
                &-attribute {
                    color: #aadafa;
                }
                &-number {
                    color: #aadafa;
                }
                &-attr {
                    color: #aadafa;
                }
                &-string {
                    color: #c5947c;

                }
            }
        }
        code {
        }
    }
}